<template>
  <div class="search-home">
    <div class="search-container">
      <div class="search-box">
        <input 
          type="text" 
          class="search-input" 
          placeholder="搜索文章、专栏、用户..."
          v-model="searchQuery"
          @keyup.enter="handleSearch"
        >
        <button class="search-btn" @click="handleSearch">搜索</button>
      </div>
      <div class="hot-tags">
        <span class="tag-label">热门标签：</span>
        <div class="tags">
          <span 
            v-for="tag in hotTags" 
            :key="tag"
            class="tag"
            @click="handleTagClick(tag)"
          >
            {{ tag }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const searchQuery = ref('');
const hotTags = ref(['博客', 'Vue3', 'React', 'JavaScript', 'TypeScript', 'Node.js']);

const handleSearch = () => {
  // 处理搜索逻辑
  console.log('Search:', searchQuery.value);
};

const handleTagClick = (tag) => {
  searchQuery.value = tag;
  handleSearch();
};
</script>

<style lang="less" scoped>
.search-home {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #42b983 0%, #33a06f 100%);

  .search-container {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    text-align: center;

    .search-box {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;

      .search-input {
        flex: 1;
        padding: 1rem;
        font-size: 1.2rem;
        border: none;
        border-radius: 4px;
        outline: none;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      }

      .search-btn {
        padding: 0 2rem;
        border: none;
        border-radius: 4px;
        background: #42b983;
        color: white;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #3aa876;
        }
      }
    }

    .hot-tags {
      .tag-label {
        color: white;
        margin-right: 1rem;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1rem;

        .tag {
          padding: 0.5rem 1rem;
          background: rgba(255,255,255,0.2);
          border-radius: 20px;
          color: white;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: rgba(255,255,255,0.3);
          }
        }
      }
    }
  }
}
</style> 